<template>
    <div></div>
</template>
<script setup>
import { onMounted, inject, onBeforeUnmount } from 'vue'
import { CityBuildingLayer, LineLayer, LayerSwitch } from '@antv/l7'
import { getWuhanBuildings, getWuhanRoads } from '@/api'

const { scene, map } = inject('mapScene')
let buildingLayer, roadLayer, layerSwitch
onMounted(async () => {

    map.flyTo({
        center: [114.406325, 30.465113],
        zoom: 15,
        pitch: 45,
    })
    //调用接口
    const buildData = await getWuhanBuildings()
    const roadData = await getWuhanRoads()
    //加载l7里面的2个图层
    buildingLayer = new CityBuildingLayer({
        name: '建筑',
    })
    buildingLayer
        .source(buildData.data)
        .size('Elevation', height => {
            return height
        })
        .filter('Elevation', h => h > 50)
        .color('rgb(240,240,240)')
        .animate(true)
        .active(true)
        .style({
            opacity: 0.8,
            baseColor: 'rgb(16,16,16)' /*颜色*/,
            windowColor: 'rgb(30,60,89)' /*窗口颜色*/,
            brightColor: 'rgb(255,176,38)' /*亮度颜色*/,
            sweep: {
                enable: true /*开启扫光扩散*/,
                sweepRadius: 2 /*扫光扩散半径*/,
                sweepColor: '#1990FF' /*扫光颜色*/,
                sweepSpeed: 0.5 /*扫光速度*/,
                sweepCenter: [114.406325, 30.465113],
            },
        })
    scene.addLayer(buildingLayer)

    roadLayer = new LineLayer({
        name: '道路',
    })
    roadLayer
        .source(roadData.data)
        .shape('line')
        .color('type', type => {
            switch (type) {
                case 'motorway':
                    return '#F9D371'
                case 'motorway_link':
                    return '#3DB2FF'
                case 'trunk':
                    return 'green'
                case 'trunk_link':
                    return '#6E85B2'
                case 'primary':
                    return '#F47340'
                case 'primary_link':
                    return '#F6A9A9'
                case 'secondary':
                    return '#EF2F88'
                case 'secondary_link':
                    return '#5F7A61'
                case 'tertiary':
                    return '#1ee3cf'
                case 'tertiary_link':
                    return '#C2F784'
                case 'pedestrian':
                    return '#FFF89A'
                case 'residential':
                    return 'rgba(22, 119, 255, .5)'
                case 'road':
                    return '#93FFD8'
                case 'path':
                    return '#BAFFB4'
                case 'unclassified':
                    return '#D3DEDC'
                case 'service':
                    return '#AEFEFF'
                case 'living_street':
                    return '#9B0000'
                case 'track':
                    return '#F5F5F5'
                case 'highway':
                    return 'red'
                case 'rail':
                    return '#08ffc8'
                default:
                    return '#FFE3E3'
            }
        })
        .size(1)
        .active(true)
        .style({
            opacity: 0.5,
        })
        .animate({
            interval: 1, // 间隔
            duration: 1, // 持续时间，延时
            trailLength: 2, // 流线长度
        })
    scene.addLayer(roadLayer)


    // 添加图层切换控件
    layerSwitch = new LayerSwitch({
        layers: [buildingLayer, roadLayer]
    })
    scene.addControl(layerSwitch)
})

onBeforeUnmount(() => {
    //移除l7图层
    scene.removeLayer(buildingLayer)
    scene.removeLayer(roadLayer)
    scene.removeControl(layerSwitch)
})

// fetch('http://localhost:8081/Wuhan_roads').then(response => response.json()).then(data => console.log(data)
// )

</script>
<style scoped></style>